<!-- 烘培圈页面 -->
<template>
  <div>
    <div class="s30153804">
      <span class="s-3613cfc6" style="left: 0; padding-left: 18px"><img alt="" src="../assets/NavPic/add.jpg" class="s-6a5cf0dc" /></span>
      <span class="s-3613cfc6" style="right: 0; padding-right: 18px"><img alt="" src="../assets/NavPic/more.jpg" class="s-6a5cf0dc" /></span>
      <van-tabs v-model="active" line-height="2px">
        <van-tab title="" disabled></van-tab>
        <van-tab title="关注">
          <div class="s-c56e13a">暂无关注</div>
        </van-tab>
        <van-tab title="最新">
          <!-- 第一行 -->
          <div class="s-2f54b345">
            <div class="s-7e03ecb7" style="width: 489px">
              <FuncCard v-for="i in 3" :key="i"></FuncCard>
            </div>
          </div>
          <!-- 第二行 -->
          <div class="s-7b08dce4">
            <div class="s2f5e316a">
              <div class="s-7e03ecb7" style="width: 1245px">
                <TagCard v-for="i in 10" :key="i"></TagCard>
              </div>
            </div>
          </div>
          <!-- 第三行 -->
          <div class="s-320adc4c">
            <!-- 一个用户卡片 -->
            <PublishCard v-for="i in 5" :key="i"></PublishCard>
          </div>
          <!-- 第四行 -->
          <div class="s-5a9af5c5">
            <!-- 加载动画 -->
            <Load></Load>
            <!-- 置顶 -->
            <Stick></Stick>
          </div>
        </van-tab>
        <van-tab title="达人">
          <!-- 一个用户卡片 -->
            <PublishCard v-for="i in 5" :key="i"></PublishCard>
        </van-tab>
        <van-tab title="" disabled></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import FuncCard from '@/components/show/FuncCard.vue'
import TagCard from '@/components/show/TagCard.vue'
import PublishCard from '@/components/show/PublishCard.vue'
import Load from '@/components/phone/Load.vue'
import Stick from '@/components/phone/Stick.vue'
export default {
  components: { FuncCard, TagCard, PublishCard, Load, Stick },
  data() {
    return {
      active: 2,
    }
  },
}
</script>

<style lang="scss" scoped>
// vant插件尺寸修改
::v-deep .van-tab {
  font-size: 16px;
  color: #999999;
}
::v-deep .van-tab--active {
  color: #4a4945;
  font-weight: bold;
}
::v-deep .van-tabs__line {
  width: 20px;
  background-color: #e98b71;
}
::v-deep .van-tabs {
  height: calc(100vh - 50px);
}
::v-deep .van-tabs__content {
  height: calc(100% - 44px);
  overflow: auto;
  background-color: #f5f7f9;
}
// 导航条
.s30153804 {
  background: #ffffff;
  height: 44px;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  // padding: 0 18px;
  margin: 0 auto;
  max-width: 600px;
  box-sizing: border-box;
}
// 导航条2侧图标
.s-3613cfc6 {
  position: absolute;
  top: 0;
  z-index: 100;
  font-size: 0;
  height: 44px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
.s-6a5cf0dc {
  width: 27px;
  height: 27px;
  margin: 9.5px 0;
}
// "关注"一栏的第一行
.s-c56e13a {
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    margin: 10px auto;
    text-align: center;
}
// "最新"一栏的第一行
.s-2f54b345 {
  background-color: #ffffff;
  border-bottom: 1px solid;
  border-bottom-color: #e7e2e5;
  padding: 5px 0 10px 0;
  margin: 0 auto;
  text-align: center;
  zoom: 1;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.s-7e03ecb7 {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
}
// "最新"一栏的第二行
.s-7b08dce4 {
  background-color: #ffffff;
  margin-bottom: 10px;
  box-sizing: border-box;
  overflow: hidden;
  zoom: 1;
}
.s2f5e316a {
  background-color: #ffffff;
  padding: 10px 0;
  margin: 0 auto;
  zoom: 1;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
// "最新"一栏的第三行
.s-320adc4c {
  margin: 0 auto;
  padding: 0;
  letter-spacing: 0.5px;
  list-style-type: none;
  overflow: hidden;
  zoom: 1;
}
//第三行
.s-5a9af5c5 {
  overflow: hidden;
  zoom: 1;
}
</style>